<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/login.css">
</head>

<body>
  <div class="xtx-wrapper">
    <div class="container">
      <!-- 卡片 -->
      <div class="xtx-card">
        <h3>用户登录</h3>
        <form class="xtx-form" action="check.jsp" method="post" id="login">
          <div data-prop="username" class="xtx-form-item">
            <span class="iconfont icon-zhanghao"></span>
            <input name="username" type="text" id="user" placeholder="请输入用户名">
            <span class="msg"></span>
          </div>

          <div data-prop="password" class="xtx-form-item">
            <span class="iconfont icon-suo"></span>
            <input name="pass" type="password" id="psw" placeholder="请输入密码">
            <span class="msg"></span>
          </div>

          <div class="xtx-form-item pl50">
            <input type="checkbox" id="agreement" name="agreement" required>
            <label for="agreement">已阅读并同意</label>
            <a href="javascript:;" class="agreement-link">《用户服务协议》</a>
          </div>
          <div class="xtx-form-item">
            <button class="submit" type="submit">登录</button>
          </div>
        </form>
      </div>
    </div>
  </div>


  <script>
    // 提交前检验
    const submit = document.querySelector('[type=submit]')
    const agree = document.querySelector('[name=agreement]')
    submit.addEventListener('click', function (e) {
      e.preventDefault()

      // 检验是否勾选
      if (!agree.checked) {
        alert('请勾选用户协议')
      }

      localStorage.setItem('xtx-username', '刘德华')
      localStorage.setItem('password', 123456)
      // 检验用户名和密码不为空
      const uname = document.querySelector('[id=user]')
      const span1 = uname.nextElementSibling
      const pwd = document.querySelector('[id=psw]')
      const span2 = pwd.nextElementSibling

      const locuname = localStorage.getItem('username')
      const locpwd = localStorage.getItem('password')

      if (uname.value && !pwd.value) {
        // 密码为空
        span2.innerHTML = '密码不能为空'
        // console.log(span1);
      }
      else if (!uname.value && pwd.value) {
        // 用户名为空
        span1.innerHTML = '用户名不能为空'
      }
      else {
        span1.innerHTML = ''
        span2.innerHTML = ''
        // 检验用户名密码是否匹配
        if (uname.value === locuname && pwd.value === locpwd) {
          // 跳转
          location.href = `./index.html`
        }
      }
    })
    // <!--用户登录界面-->
  </script>
</body>

</html>